<template>

  <div>


    <sky-panel title="单选与多选条件">
      <template #main>

        <sky-radio-group v-model="radio" class="mb-10" label="选择电商">
          <sky-radio label="天猫" value="1" />
          <sky-radio label="淘宝" value="2" />
          <sky-radio label="拼多多" value="3" />
          <sky-radio label="蘑菇街" value="4" />
          <sky-radio label="京东" value="5" />
          <sky-radio label="聚划算" value="6" />
          <sky-radio label="小米商城" value="7" />
        </sky-radio-group>

        <sky-checkbox-group v-model="checkbox" class="mb-10" label="兴趣爱好">
          <sky-checkbox label="全部" value="0" />
          <sky-checkbox label="篮球" value="1" />
          <sky-checkbox label="足球" value="2" />
          <sky-checkbox label="乒乓球" value="3" />
          <sky-checkbox label="网球" value="4" />
          <sky-checkbox label="羽毛球" value="5" />
          <sky-checkbox label="蹦迪" value="6" />
          <sky-checkbox label="打游戏" value="7" />
        </sky-checkbox-group>

      </template>
    </sky-panel>

  <sky-code-panel>
    <div class="prewrap" v-highlight>
      <!-- 使用指令 -->
      <pre>
        <code class="html">

        &lt;sky-radio-group v-model="radio" class="mb-10" label="选择电商"&gt;
          &lt;sky-radio label="天猫" value="1" /&gt;
          &lt;sky-radio label="淘宝" value="2" /&gt;
          &lt;sky-radio label="拼多多" value="3" /&gt;
          &lt;sky-radio label="蘑菇街" value="4" /&gt;
          &lt;sky-radio label="京东" value="5" /&gt;
          &lt;sky-radio label="聚划算" value="6" /&gt;
          &lt;sky-radio label="小米商城" value="7" /&gt;
        &lt;/sky-radio-group&gt;

        &lt;sky-checkbox-group v-model="checkbox" class="mb-10" label="兴趣爱好"&gt;
          &lt;sky-checkbox label="全部" value="0" /&gt;
          &lt;sky-checkbox label="篮球" value="1" /&gt;
          &lt;sky-checkbox label="足球" value="2" /&gt;
          &lt;sky-checkbox label="乒乓球" value="3" /&gt;
          &lt;sky-checkbox label="网球" value="4" /&gt;
          &lt;sky-checkbox label="羽毛球" value="5" /&gt;
          &lt;sky-checkbox label="蹦迪" value="6" /&gt;
          &lt;sky-checkbox label="打游戏" value="7" /&gt;
        &lt;/sky-checkbox-group&gt;
          
        </code>
        <code class="javascript">

        import { defineComponent, ref } from 'vue'

        export default defineComponent({
          setup() {
            const radio = ref('1')
            const checkbox = ref(['3', '6'])

            return {
              radio,
              checkbox
            }
          }
        })
              
        </code>
    </pre>
    </div>
  </sky-code-panel>

  </div>

</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const radio = ref('1')
    const checkbox = ref(['3', '6'])

    return {
      radio,
      checkbox
    }
  }
})
</script>

<style scoped>

</style>